// 场景解决方案页面
import Navbar from '../components/Navbar.js';
import Footer from '../components/Footer.js';
import { navigateTo } from '../router/index.js';

function UseCases() {
  const useCasesPage = document.createElement('div');
  useCasesPage.className = 'min-h-screen flex flex-col';
  
  // 创建导航栏
  const navbar = Navbar();
  useCasesPage.appendChild(navbar);
  
  // 页面内容
  const contentContainer = document.createElement('div');
  contentContainer.className = 'flex-grow';
  contentContainer.innerHTML = `
    
    <!-- 页面标题区 -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-50 section-padding">
      <div class="container mx-auto px-4 md:px-8 text-center">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4">场景解决方案</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          MSRM3为不同行业和应用场景提供定制化的网络管理解决方案，满足各类用户需求
        </p>
      </div>
    </section>
    
    <!-- 解决方案卡片 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 内网安全更新解决方案 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
            <div class="h-48 bg-gradient-to-r from-primary to-indigo-600 flex items-center justify-center">
              <i class="fa fa-shield text-6xl text-white"></i>
            </div>
            <div class="p-6 space-y-4">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-dark">内网安全更新解决方案</h3>
                <span class="bg-primary/10 text-primary text-xs font-medium px-2.5 py-0.5 rounded">热门方案</span>
              </div>
              <p class="text-gray-600">
                针对无外网权限的内网环境，提供本地前端更新服务端功能，保障内网系统安全更新，避免外部威胁。
              </p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">支持离线环境下的系统更新</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">无需暴露内网服务器至外网</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">保证版本一致性和安全性</span>
                </li>
              </ul>
              <div class="mt-4 pt-4 border-t border-gray-100">
                <button class="use-case-detail-btn text-primary hover:text-primary-dark font-medium flex items-center">
                  查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 国产化替代部署场景 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
            <div class="h-48 bg-gradient-to-r from-red-500 to-orange-500 flex items-center justify-center">
              <i class="fa fa-flag text-6xl text-white"></i>
            </div>
            <div class="p-6 space-y-4">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-dark">国产化替代部署场景</h3>
                <span class="bg-red-100 text-red-600 text-xs font-medium px-2.5 py-0.5 rounded">推荐方案</span>
              </div>
              <p class="text-gray-600">
                为政府、金融、教育等领域提供全面的国产化替代方案，支持主流国产操作系统和硬件平台，确保信息安全自主可控。
              </p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">兼容银河麒麟、统信UOS等国产系统</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">支持国产CPU架构（如飞腾、鲲鹏）</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">满足等保合规要求</span>
                </li>
              </ul>
              <div class="mt-4 pt-4 border-t border-gray-100">
                <button class="use-case-detail-btn text-primary hover:text-primary-dark font-medium flex items-center">
                  查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 大规模网络监控场景 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
            <div class="h-48 bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center">
              <i class="fa fa-server text-6xl text-white"></i>
            </div>
            <div class="p-6 space-y-4">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-dark">大规模网络监控场景</h3>
                <span class="bg-blue-100 text-blue-600 text-xs font-medium px-2.5 py-0.5 rounded">企业级</span>
              </div>
              <p class="text-gray-600">
                针对大型企业、园区、数据中心等大规模网络环境，提供高性能、分布式的网络监控解决方案。
              </p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">支持上万节点的网络拓扑管理</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">分布式部署，避免单点故障</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">多级权限管理，适应大型组织架构</span>
                </li>
              </ul>
              <div class="mt-4 pt-4 border-t border-gray-100">
                <button class="use-case-detail-btn text-primary hover:text-primary-dark font-medium flex items-center">
                  查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 智能摄像头网络管理 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
            <div class="h-48 bg-gradient-to-r from-green-500 to-teal-500 flex items-center justify-center">
              <i class="fa fa-video-camera text-6xl text-white"></i>
            </div>
            <div class="p-6 space-y-4">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-dark">智能摄像头网络管理</h3>
                <span class="bg-green-100 text-green-600 text-xs font-medium px-2.5 py-0.5 rounded">安防行业</span>
              </div>
              <p class="text-gray-600">
                为安防监控系统提供专用的网络管理解决方案，实时监控摄像头网络状态，确保监控系统稳定运行。
              </p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">摄像头设备快速发现和状态监控</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">网络质量监控，保障视频传输流畅</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">批量设备管理，提高运维效率</span>
                </li>
              </ul>
              <div class="mt-4 pt-4 border-t border-gray-100">
                <button class="use-case-detail-btn text-primary hover:text-primary-dark font-medium flex items-center">
                  查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 校园网络管理方案 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
            <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
              <i class="fa fa-graduation-cap text-6xl text-white"></i>
            </div>
            <div class="p-6 space-y-4">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-dark">校园网络管理方案</h3>
                <span class="bg-purple-100 text-purple-600 text-xs font-medium px-2.5 py-0.5 rounded">教育行业</span>
              </div>
              <p class="text-gray-600">
                为高校和中小学提供校园网络管理解决方案，支持多校区、多网段管理，满足教学和办公网络需求。
              </p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">多校区网络统一管理</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">教学区与办公区网络隔离与监控</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">学生宿舍网络状态监控</span>
                </li>
              </ul>
              <div class="mt-4 pt-4 border-t border-gray-100">
                <button class="use-case-detail-btn text-primary hover:text-primary-dark font-medium flex items-center">
                  查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 医疗网络安全方案 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
            <div class="h-48 bg-gradient-to-r from-teal-500 to-green-500 flex items-center justify-center">
              <i class="fa fa-medkit text-6xl text-white"></i>
            </div>
            <div class="p-6 space-y-4">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-dark">医疗网络安全方案</h3>
                <span class="bg-teal-100 text-teal-600 text-xs font-medium px-2.5 py-0.5 rounded">医疗行业</span>
              </div>
              <p class="text-gray-600">
                为医院和医疗机构提供网络安全解决方案，保障医疗设备网络安全和数据传输安全，符合医疗行业规范。
              </p>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">医疗设备网络状态实时监控</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">网络安全隔离，防止病毒传播</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-primary mt-1 mr-2"></i>
                  <span class="text-sm text-gray-600">符合医疗数据安全标准</span>
                </li>
              </ul>
              <div class="mt-4 pt-4 border-t border-gray-100">
                <button class="use-case-detail-btn text-primary hover:text-primary-dark font-medium flex items-center">
                  查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 解决方案详情弹窗 -->
        <div id="use-case-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
          <div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-gray-200 flex justify-between items-center">
              <h3 class="text-2xl font-bold text-dark" id="modal-title">解决方案详情</h3>
              <button id="close-modal-btn" class="text-gray-400 hover:text-gray-600">
                <i class="fa fa-times text-xl"></i>
              </button>
            </div>
            <div class="p-6" id="modal-content">
              <!-- 解决方案详情将通过JavaScript动态加载 -->
            </div>
            <div class="p-6 border-t border-gray-200 flex justify-end">
              <button id="modal-download-btn" class="btn-primary mr-4">
                <i class="fa fa-download mr-2"></i>下载方案白皮书
              </button>
              <button id="modal-close-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium px-6 py-3 rounded-lg transition-colors duration-200">
                关闭
              </button>
            </div>
          </div>
        </div>
        
        <!-- 立即体验按钮 -->
        <div class="text-center mt-12">
          <button id="try-now-btn" class="btn-primary px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300 hover:shadow-xl">
            <i class="fa fa-download mr-2"></i>下载MSRM3，适配您的场景
          </button>
        </div>
      </div>
    </section>
    
  `;
  
  // 创建页脚
  const footer = Footer();
  
  // 组装页面
  useCasesPage.appendChild(contentContainer);
  useCasesPage.appendChild(footer);
  
  // 添加导航事件监听
  contentContainer.querySelector('#try-now-btn').addEventListener('click', () => navigateTo('/download'));
  
  // 解决方案详情弹窗功能
  const modal = contentContainer.querySelector('#use-case-modal');
  const closeModalBtn1 = contentContainer.querySelector('#close-modal-btn');
  const closeModalBtn2 = contentContainer.querySelector('#modal-close-btn');
  const modalTitle = contentContainer.querySelector('#modal-title');
  const modalContent = contentContainer.querySelector('#modal-content');
  const modalDownloadBtn = contentContainer.querySelector('#modal-download-btn');
  const detailBtns = contentContainer.querySelectorAll('.use-case-detail-btn');
  
  // 关闭弹窗
  function closeModal() {
    modal.classList.add('hidden');
  }
  
  // 打开弹窗
  function openModal(title, content) {
    modalTitle.textContent = title;
    modalContent.innerHTML = content;
    modal.classList.remove('hidden');
  }
  
  // 绑定关闭按钮事件
  closeModalBtn1.addEventListener('click', closeModal);
  closeModalBtn2.addEventListener('click', closeModal);
  
  // 绑定详情按钮事件
  detailBtns.forEach((btn, index) => {
    btn.addEventListener('click', () => {
      let title = '';
      let content = '';
      
      switch(index) {
        case 0: // 内网安全更新解决方案
          title = '内网安全更新解决方案';
          content = `
            <div class="space-y-6">
              <p class="text-gray-700">
                内网安全更新解决方案专为无外网权限的内网环境设计，通过本地前端更新服务端功能，确保内网系统安全更新，避免外部威胁。
              </p>
              <h4 class="text-lg font-bold text-dark">方案特点</h4>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>支持离线环境下的系统更新，无需连接互联网</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>无需暴露内网服务器至外网，降低安全风险</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>保证版本一致性和安全性，避免使用非官方版本</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>支持批量更新内网多台服务器，提高运维效率</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>提供更新日志和版本对比功能，了解更新内容</span>
                </li>
              </ul>
              <h4 class="text-lg font-bold text-dark">适用场景</h4>
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="bg-gray-50 p-4 rounded-lg">
                  <p class="font-medium">政府内网</p>
                  <p class="text-sm text-gray-600">适用于严格隔离的政府内网环境，确保系统安全更新</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                  <p class="font-medium">金融行业</p>
                  <p class="text-sm text-gray-600">满足金融机构网络安全要求，避免外部网络连接</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                  <p class="font-medium">军工企业</p>
                  <p class="text-sm text-gray-600">支持高保密等级的军工网络环境，确保信息安全</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                  <p class="font-medium">医疗系统</p>
                  <p class="text-sm text-gray-600">保障医疗网络安全，符合医疗数据保护要求</p>
                </div>
              </div>
              <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
                <p class="text-blue-700">
                  <i class="fa fa-info-circle mr-2"></i>
                  此方案已在多个大型国企和政府机构成功应用，获得高度评价
                </p>
              </div>
            </div>
          `;
          break;
        case 1: // 国产化替代部署场景
          title = '国产化替代部署场景';
          content = `
            <div class="space-y-6">
              <p class="text-gray-700">
                国产化替代部署场景为政府、金融、教育等领域提供全面的国产化替代方案，支持主流国产操作系统和硬件平台，确保信息安全自主可控。
              </p>
              <h4 class="text-lg font-bold text-dark">支持的国产系统</h4>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                  <i class="fa fa-desktop text-2xl text-primary mb-2"></i>
                  <p class="font-medium">银河麒麟</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                  <i class="fa fa-desktop text-2xl text-primary mb-2"></i>
                  <p class="font-medium">统信UOS</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                  <i class="fa fa-desktop text-2xl text-primary mb-2"></i>
                  <p class="font-medium">中标麒麟</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                  <i class="fa fa-desktop text-2xl text-primary mb-2"></i>
                  <p class="font-medium">深度Linux</p>
                </div>
              </div>
              <h4 class="text-lg font-bold text-dark">方案优势</h4>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>兼容主流国产操作系统，无需修改现有网络架构</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>支持国产CPU架构（如飞腾、鲲鹏、龙芯等）</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>满足等保合规要求，符合国产化替代政策</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>提供完整的迁移方案和技术支持</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>性能优化，在国产硬件上提供更好的用户体验</span>
                </li>
              </ul>
              <div class="bg-red-50 p-4 rounded-lg border border-red-100">
                <p class="text-red-700">
                  <i class="fa fa-exclamation-circle mr-2"></i>
                  推荐在国产化替代过程中，先进行小规模试点，再逐步推广
                </p>
              </div>
            </div>
          `;
          break;
        default:
          title = '解决方案详情';
          content = '<p class="text-gray-700">详细内容请下载完整方案白皮书。</p>';
      }
      
      openModal(title, content);
    });
  });
  
  // 白皮书下载按钮事件
  modalDownloadBtn.addEventListener('click', () => {
    alert('白皮书下载链接已复制到剪贴板！');
  });
  
  // 点击弹窗外区域关闭弹窗
  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      closeModal();
    }
  });
  
  return useCasesPage;
}

export default UseCases;